<template>
    <div class="selectComponent" v-if="oItem">
      <div class="item">
        <div class="left">必填</div>
        <div class="right">
          <el-switch
            v-model="oItem.required"
            active-color="#0079fe"
            inactive-color="#dddddd"
            @change="requiredChange">
          </el-switch>
        </div>
      </div>
      <div class="item">
        <div class="left">标题</div>
        <div class="right">
          <el-input placeholder="请输入标题内容" v-model="oItem.title" :maxlength="50" @input="titleInputChange" clearable>
          </el-input>
        </div>
      </div>
      <div class="item">
        <div class="left">说明文字</div>
        <div class="right">
          <el-input placeholder="请输入说明文字" v-model="oItem.desc" :maxlength="100" @input="descInputChange" clearable>
          </el-input>
        </div>
      </div>
      <div class="item">
        <div class="left">提示语</div>
        <div class="right">
          <el-input placeholder="请输入" v-model.trim="oItem.placeholder" :maxlength="50" @input="placeholderInputChange" clearable>
          </el-input>
        </div>
      </div>
      <div class="item mul">
        <div class="left">选项</div>
        <div class="right">
          <div class="item" v-for="ol in oItem.list" :key="ol.id">
              <el-input placeholder="请输入选项内容" v-model.trim="ol.value" :maxlength="50" @input="optionInputChange(ol)" clearable>
              </el-input>
              <el-button v-if="oItem.list.length>1" type="default" icon="el-icon-remove" @click="optionDelChange(ol)"></el-button>
          </div>
          <el-button type="primary" icon="el-icon-plus" @click="optionAddChange">增加新选项</el-button>
        </div>
      </div>
    </div>
</template>
<script>
import Bus from "@/utils/bus";
export default {
    name: "selectComponent",
    data() {
        return {
          pageName: "下拉选项组件",
          oItem: null
        }
    },
    created() {},
    props: ["item"],
    components: {},
    mounted() {
      if (this.item) {
        this.oItem = this.item;
      }
    },
    methods: {
      //切换是否必填的状态
      requiredChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.required = this.oItem.required;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          required: this.oItem.required
        })
      },
      //监听输入标题的事件
      titleInputChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.title = this.oItem.title;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          title: this.oItem.title
        })
      },
      //监听输入文字描述的事件
      descInputChange() {
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.desc = this.oItem.desc;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          desc: this.oItem.desc
        })
      },
      //监听输入提示语的事件
      placeholderInputChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.placeholder = this.oItem.placeholder;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          placeholder: this.oItem.placeholder
        })
      },
      //监听输入选项的事件
      optionInputChange(row){
        this.oItem.list.forEach(item=>{
          if(item.id==row.id) {
            item.name = item.value;
          }
        })
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.list = this.oItem.list;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          list: this.oItem.list
        })
      },
      //监听增加选项的事件
      optionAddChange(){
        this.oItem.list.push({
          id: new Date().getTime(),
          name: "选项内容",
          value: "选项内容",
        })
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.list = this.oItem.list;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          list: this.oItem.list
        })
      },
      //监听删除选项的事件
      optionDelChange(row){
        this.oItem.list = this.oItem.list.filter(li => li.id!=row.id);
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.list = this.oItem.list;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          list: this.oItem.list
        })
      },
    },
    computed: {},
    watch: {},
}
</script>
<style scoped lang="scss">
.selectComponent{width: 100%;
  .item{width: 100%;
    display: flex; align-items: center; margin-bottom:20px;
    .left{width:30%;display: flex; justify-content: flex-end;padding-right: 10px;box-sizing: border-box;font-size: 14px;color:#888;}
    .right{width: 70%;}
    &.mul{
      align-items: flex-start;
      .left{height: 36px;align-items: center;}
      .right{
        .item{margin-bottom: 20px; display: flex; align-items: center;
          .el-button{margin-left: 20px;width:40px;padding-left:0;padding-right: 0;}
        }
      }
    }

  }
}
</style>
